<template>
    <div class="fund-list">
        <el-card class="risk-control-button" :body-style="{ color: '#575757' }">
            <div style="margin-top: 10px">
                <slot name="searchSlot"></slot>
            </div>
        </el-card>
        <div class="content-div">
            <h2 style="margin: 10px 0; width: 100%; text-align: center">
                <slot name="titleSlot"></slot>
            </h2>
            <slot name="tableSlot"></slot>
            <slot name="tableSlot2"></slot>
            <slot name="tableSlot3"></slot>
            <slot name="paginationSlot"></slot>
            <slot name="other"></slot>
        </div>
    </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
@Component({
    name: 'ContentLayout',
    components: {
    },
})
export default class ContentLayout extends Vue {
}
</script>
<style lang="scss" scoped>
.fund-list {
    padding: 20px 15px;
    height: 100%;
    // overflow: hidden;
    .risk-control-button {
        border: 1px solid #cacaca;
        margin-bottom: 10px;
        white-space: nowrap;
    }
    .content-div {
        // height: calc(100vh - 220px);
        border: 1px solid rgb(202, 202, 202);
    }
    /deep/.el-date-editor .el-range-separator {
        width: 10%;
    }
}
/deep/ .el-card .el-card__body {
    padding: 10px;
}
.el-col-6 {
  height: 50px;
}
/deep/ .el-form-item__label {
    color: #575757;
}
</style>
